<template>
    <div class="homeGoods" ref="a">
        <h1>服饰 <span><b>室外拖鞋</b><b>春夏潮鞋</b><b>飞织系列</b><b>懒人系列</b></span><strong>查看全部&gt;</strong></h1>
        <div class="box">
            <div class="left">
                <img :src="imgLeft" alt="">
            </div>
            <div class="right">
                <li v-for="item in goodsList" :key="item.id">
                    <div class="box goods-item">
                        <router-link to="/" class="image">
                            <img src="" alt="" v-lazy="item.picture">
                        </router-link>
                        <p class="name ellipsis-2">{{ item.name }}</p>
                        <p class="desc">{{ item.desc }}</p>
                        <!-- <p></p> -->
                        <p class="price"><span>￥{{ item.price }}</span></p>
                        <div class="extra">
                            <RouterLink to="/">
                                <span>找相似</span>
                                <span>发现现多宝贝 &gt;</span>
                            </RouterLink>
                        </div>
                    </div>
                </li>
            </div>
        </div>
    </div>
</template>

<script>
import { getHomeGoods } from '@/utils/api/homeapi'
import { lazyLoad } from '@/utils/lazyLoad'
export default {
    data() {
        return {
            imgLeft: '',
            goodsList: [],
        }
    },
    methods: {
        async getGoodsList() {
            let res = await getHomeGoods();
            // console.log(res);
            this.imgLeft = res.result[2].picture
            // console.log(this.imgLeft);
            this.goodsList = res.result[2].goods;
            // console.log(this.goodsList);
        }
    },
    mounted() {
        lazyLoad(this.$refs.a, this.getGoodsList);
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";

.homeGoods {
    width: 100%;
    height: 700px;
    // background-color: white;

    // background-color: red;
    h1 {
        display: flex;
        justify-content: space-between;
        line-height: 100px;
        align-items: center;

        span {
            width: 420px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            margin-left: 600px;
            text-align: center;

            b {
                margin-right: 20px;
                border-radius: 5px;
                color: rgb(139, 137, 137);
            }

            b:hover {
                background-color: #27ba9b;
            }
        }

        strong {
            font-size: 20px;
        }
    }

    .box {
        width: 100%;
        height: 600px;
        // background-color: yellow;
        display: flex;
        justify-content: space-between;

        .left {
            width: 20%;
            height: 100%;
            // background-color: green;
            // box-shadow: 0 0 4px black;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .right {
            width: 78%;
            height: 100%;
            // background-color: pink;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;

            li {
                width: 24%;
                height: 49%;
                list-style: none;
                // background-color: purple;

                // .box {
                //     width: 80%;
                //     height: 90%;
                //     // background-color: yellow;
                //     margin: auto;
                //     display: flex;
                //     flex-direction: column;

                //     img {
                //         width: 100%;
                //         height: 160px;
                //     }

                //     p {
                //         font-size: 20px;
                //         overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
                //         white-space: nowrap; //（设置文字在一行显示，不能换行）
                //         text-overflow: ellipsis; //（规定当文本溢出时，显示省略符号来代表被修剪的文本）

                //         span {
                //             color: red;
                //         }
                //     }
                // }
                .goods-item {
                    width: 240px;
                    height: 300px;
                    padding: 10px 30px;
                    position: relative;
                    overflow: hidden;
                    border: 1px solid transparent;
                    transition: all .5s;
                    display: flex;
                    flex-direction: column;

                    .image {
                        display: block;
                        width: 160px;
                        height: 160px;
                        margin: 0 auto;

                        img {
                            width: 100%;
                            height: 90%;
                        }
                    }

                    p {
                        margin-top: 6px;
                        font-size: 16px;
                        overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
                        white-space: nowrap; //（设置文字在一行显示，不能换行）
                        text-overflow: ellipsis; //（规定当文本溢出时，显示省略符号来代表被修剪的文本）

                        &.name {
                            height: 44px;
                        }

                        &.desc {
                            color: #666;
                            height: 22px;
                        }

                        &.price {
                            margin-top: 10px;
                            font-size: 20px;
                            color: $priceColor;
                        }
                    }

                    .extra {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        height: 86px;
                        width: 100%;
                        background: $xtxColor;
                        text-align: center;
                        transform: translate3d(0, 100%, 0);
                        transition: all .5s;

                        span {
                            display: block;
                            color: #fff;
                            width: 120px;
                            margin: 0 auto;
                            line-height: 30px;

                            &:first-child {
                                font-size: 18px;
                                border-bottom: 1px solid #fff;
                                line-height: 40px;
                                margin-top: 5px;
                            }
                        }
                    }

                    &:hover {
                        border-color: $xtxColor;

                        .extra {
                            transform: none;
                        }
                    }
                }
            }
        }


    }
}
</style>